<template>
<div class="allContentBox">
  <div id="twoPanel">
    <split-pane :min-percent="0" :default-percent="0" split="vertical">
      <template slot="paneR">
        <split-pane split="horizontal" :min-percent="1" :default-percent="defaultPar">
          <template slot="paneL">
            <div class="panelBox" style="padding: 10px;">
              <slot name="top"/>
            </div> 
          </template>
          <template slot="paneR">
            <div class="panlBtn">
              <img v-if="upHiehgt < 30" class="imgStyle" @click="shrinkTop('up')" src="@/assets/images/down.png" />
              <img v-else class="imgStyle" @click="shrinkTop('down')" src="@/assets/images/up.png" />
            </div>
            <div class="panelBox" style="overflow:hidden;">
              <column-two :headerHeight="bottomToolbarHeight">
                <template v-slot:header v-if="bottomToolbarHeight>0">
                  <ScrollBar><slot name="bottomToolbar"/></ScrollBar>
                </template>
                <template v-slot:footer>
                  <slot name="bottom" />
                </template>
              </column-two>
            </div>
          </template>
        </split-pane>
      </template>
    </split-pane>
  </div>
  <div><slot></slot></div>
</div>
</template>

<script>
import ScrollBar from '@/components/ScrollBar'
export default {
  components: {
    ScrollBar,
  },
  props: {
    defaultNums: Number,
    bottomToolbarHeight: {
      type: String,
      default: '35',
    },
    defaultPar: {
      type: Number,
      default: 20
    }
  },
  data() {
    return {
       lastTime:'',
      //  defaultPar:20,
       upHiehgt:100,
    }
  },
  mounted() {
    setTimeout(() => {
      this.upHiehgt = document.getElementsByClassName('splitter-paneL')[1].offsetHeight
    },2000)
  },
  watch:{
    defaultNums(val){
      this.defaultPar = val
    }
  },
  methods:{
    shrinkTop(params){
      if(params === 'up'){
        this.$nextTick(() => {
          this.defaultPar = Object.assign(18);
        })
      } else {
        this.$nextTick(() => {
          this.defaultPar = Object.assign(1);
        })
      }
      setTimeout(() => { this.upHiehgt = document.getElementsByClassName('splitter-paneL')[1].offsetHeight })
    },
    throttle(fun,delay){
      let timer = null;
      if(timer){
        clearTimeout(timer);
      }
      return function(){
        setTimeout(() => {
          fun();
        },delay);
      }
    }, 
  }
}
</script>
 
<style lang="scss" scoped="scoped">
.allContentBox {
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
}
.panelBox{
  position:absolute;
  width:100%;
  height:100%;
  overflow:auto;
}
.panlBtn{
  position: absolute;
  margin: -20px 0 0 50%;
  text-align: center;
  z-index: 18;
}
.imgStyle{
  height: 10px;
  cursor: pointer;
}
#twoPanel{
  position:absolute;
  width:calc(100% - 20px);
  height:calc(100% - 100px);
  margin: 10px;
  border-radius:4px;
  box-shadow: -1px 0px 11px 3px rgba(141,138,138,0.31);
} 
#twoPanel .panelBox{
  background: white;
  top: -2px;
}
</style>
<style>
  #twoPanel .splitter-pane-resizer{
    width: 100%;
    height: 0; 
    margin: -11px 0; 
    background:rgb(211, 234, 255) !important;
    opacity: 1 !important;
    cursor: row-resize; 
  }
  #twoPanel .splitter-pane-resizer.horizontal{
    border-top: 5px solid hsla(0,0%,100%,0);
  }
  #twoPanel .splitter-pane.horizontal.splitter-paneL{
    background: white;
    top: -2px;
  }
  #twoPanel .splitter-pane.vertical.splitter-paneR {
    padding-left: 0;
  }  
</style>